<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view class="flex align-center justify-between" style="padding: 0 178upx; background-color: white;">
      <view class="tab flex align-center justify-center" @click="handleChangeTab(index)"
            v-for="(item,index) in tab_list" :key="index"
            :style="tab_index == index?'color: rgba(229,39,24,1);font-size: 30upx;border-bottom: 1px solid rgba(229,39,24,1);':''">
        {{ item }}
      </view>
    </view>
    <view class="content" v-if="show_flag">
      <view class="order-item"
            v-for="(item, index) in order_list" :key="index" style="margin-bottom: 30upx;"
            @click="handleToArticle(item.order && item.order.article_id, item.order && item.order.article && item.order.article.type )">
        <view class="number">订单编号: {{ item.trade_no }}</view>
        <view class="flex" style="padding-bottom: 20upx;border-bottom: 1px solid rgba(0,0,0,0.05);">
          <view style="margin-top: 20upx;">
            <image style="width: 286upx;height: 198upx;"
                   :src="item.order && item.order.article && item.order.article.img_arr[0]" mode="aspectFill"></image>
          </view>
          <view class="flex flex-direction" style="margin: 36upx 0 0 18upx; width: 56%;">
            <view class="title text-hidden">{{ item.order && item.order.name }}</view>
            <view class="flex justify-between">
              <view class="type" v-if="item.order && item.order.article">{{ item.category }}</view>
              <view style="font-size: 26upx; color: #999999;">{{ item.pay_type_name }}</view>
            </view>
            <view style="margin-top: 32upx;font-size: 30upx;color: rgba(229,39,24,1);"
                  :style="item.order && item.order.article ? '' : 'margin-bottom: 20upx;'">
              ￥{{ item.order && item.order.sale_price }}
            </view>
          </view>
        </view>
        <view class="flex align-center bottom" style="padding: 20upx;">
          <view class="buttom flex align-center justify-center" @click.stop="handleDelete(item.id, index)"
                style="color: rgba(229,39,24,1);border: 1px solid rgba(229,39,24,1);">删除
          </view>
          <view class="buttom flex align-center justify-center"
                @click.stop="handleEvaluate(index, item.pay_status, item.is_evaluate, item.id, item)"
                style="color: #FFFFFF;background-color: rgba(229,39,24,1);margin-right: 10upx;">
            {{ tab_index === 0 ? '付款' : item.is_evaluate ? '追评' : '评价' }}
          </view>
        </view>
      </view>
    </view>
    <view v-if="order_list.length == 0 && show_flag" class="justify-center align-center"
          style="width: 100%; margin-top: 160upx; flex-direction: column; text-align: center;">
      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="order_list.length >=15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {orders_getListByCon, orders_delOrder} from "api/my/my"
import {orders_payOrder, pay_aliPayOrders} from "api/pay/pay";

export default {
  data() {
    return {
      tab_list: ['待支付', '已完成'], //分类栏
      tab_index: 0, //tab栏点击索引值
      order_list: [], //已完成订单
      bottom_flag: true,// 触底标识
      page: 1,// 分页
      is_load: false, //加载
      show_flag: false,
    }
  },
  methods: {
    //初始化
    pageInit(pay_status = 0, page = 1, type) {
      this.page = page;
      orders_getListByCon({pay_status, page}).then(res => {
        console.log(res)
        if (type) {
          this.order_list = [];
        }
        let temp_data = res.data.data;
        if (!temp_data.length) {
          this.bottom_flag = false;
        } else {
          temp_data.forEach(item => {
            this.order_list.push(item)
          })
        }
      }).finally(() => {
        this.show_flag = true;
      })
    },
    /**
     * @name tab选择
     * @param {Object} index 索引值
     */
    handleChangeTab(index) {
      this.tab_index = index
      this.is_load = false;
      this.bottom_flag = true;
      switch (index) {
        case 0:
          this.pageInit(0, 1, 1);
          break;
        case 1:
          this.pageInit(1, 1, 1)
          break;
      }
    },
    //去文章详情页
    handleToArticle(article_id, type) {
      let jump_url_obj = {
        article_product: '/pages/passBand/projectDetail/projectDetail',
        product: '/pages/passBand/otherDetail/otherDetail'
      }
      this.$uniNavigateTo({
        url: jump_url_obj[type],
        query: {
          article_id
        }
      })
    },
    //删除订单
    handleDelete(order_id, index) {
      uni.showModal({
        title: '提示',
        content: '是否要删除订单',
        success: (res) => {
          if (res.confirm) {
            orders_delOrder({order_id}).then(res => {
              uni.showToast({
                icon: 'none',
                title: '删除成功',
              })
              this.order_list.splice(index, 1)
            }).catch(err => {
              console.log(err)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 评价订单
    handleEvaluate(index, pay_status, evaluate, orders_id, item) {
      if (item.is_delete) {
        uni.showToast({
          title: '商品已删除，无法评价',
          icon: 'none'
        })
        return;
      }
      if (pay_status) {
        if (evaluate) {
          this.$uniNavigateTo({
            url: '/pages/my/myOrder/orderReview/orderReview',
            query: {
              orders_id
            }
          })
        } else {
          this.$uniNavigateTo({
            url: '/pages/my/myOrder/orderAssess/orderAssess',
            query: {
              orders_id
            }
          })
        }
      } else {
        let data = {
          f_table: item.f_table,
          f_id: item.f_id,
          fee: item.fee,
          article_id: item.order && item.order.article_id,
          order_id: item.id,
        }
        let user_id = uni.getStorageSync('user_info').id
        switch (item.pay_type) {
          case 'alipay_pay':
            plus.runtime.openURL(`${this.$cbdh5url}pay?f_table=${item.f_table}&f_id=${item.f_id}&fee=${item.fee}&article_id=${item.order && item.order.article_id}&order_id=${item.id}&user_id=${user_id}&type=1`);
            // pay_aliPayOrders(data).then(res=>{
            //   uni.requestPayment({
            //     provider: 'alipay',
            //     orderInfo: res.data, //微信、支付宝订单数据
            //     success: (res)=> {
            //       this.order_list.splice(index, 1);
            //       uni.showToast({
            //         title: '支付成功',
            //         icon: 'none'
            //       })
            //       console.log('success:' + JSON.stringify(res));
            //     },
            //     fail: (err)=> {
            //       uni.showToast({
            //         title: '您取消了支付',
            //         icon: 'none'
            //       })
            //       console.log('fail:' + JSON.stringify(err));
            //     }
            //   });
            // }).catch(err=>{
            //   console.log(err)
            // })
            break;
          case 'wechat_pay':
            plus.runtime.openURL(`${this.$cbdh5url}pay?f_table=${item.f_table}&f_id=${item.f_id}&fee=${item.fee}&article_id=${item.order && item.order.article_id}&order_id=${item.id}&user_id=${user_id}`);
            // orders_payOrder(data).then(res => {
            //   uni.requestPayment({
            //     provider: 'wxpay',
            //     orderInfo: res.data, //微信、支付宝订单数据
            //     success: (res) => {
            //       this.order_list.splice(index, 1);
            //       uni.showToast({
            //         title: '支付成功',
            //         icon: 'none'
            //       })
            //     },
            //     fail: (err) => {
            //       uni.showToast({
            //         title: '您取消了支付',
            //         icon: 'none'
            //       })
            //       console.log('fail:' + JSON.stringify(err));
            //     }
            //   });
            // }).catch(err => {
            //   console.log(err)
            // })
            break;
        }
      }
    },
  },
  onShow() {
    uni.pageScrollTo({scrollTop: 0, duration: 0});
    this.bottom_flag = true;
    this.pageInit(this.tab_index, 1, 1);
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.tab_index, this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.bottom_flag = true;
    this.page = 1;
    this.pageInit(this.tab_index, 1, 1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style scoped lang="scss">
.tab {
  height: 86upx;
  font-size: 28upx;
}

.content {
  padding: 30upx 20upx 0 20upx;
  background-color: rgba(248, 248, 248, 1);
}

.order-item {
  height: 416upx;
  background-color: #FFFFFF;
  border-radius: 10upx;
  padding: 0upx 18upx 20upx 22upx;
}

.number {
  padding: 20upx 0;
  font-size: 24upx;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 30upx;
  font-weight: 700;
  margin-bottom: 24upx;
}

.type {
  padding: 4upx 16upx;
  background-color: rgba(255, 233, 231, 1);
  border-radius: 4upx;
  font-size: 22upx;
  color: rgba(241, 93, 80, 1);
}

.bottom {
  flex-direction: row-reverse;
}

.buttom {
  width: 140upx;
  height: 60upx;
  border-radius: 40upx;
  font-size: 24upx;
}
</style>
